<script setup lang="ts">
import { nickNameStore } from '@/stores/prifile'
import { ref, watch } from 'vue'

// 输入内容
const inputContent = ref('')
const store = nickNameStore()
watch(inputContent, (newValue, oldValue) => {
  console.log('Input content changed:', newValue)
  inputContent.value = newValue
  // Perform some action here with the new value
  store.changeNickName(newValue)
  // 更新原生侧昵称
  const user = Tt.queryUser()
  user.mobile = newValue
  Tt.updateUser(user)
})
</script>

<template>
  <van-cell-group inset class="input">
    <van-field
      v-model="inputContent"
      rows="1"
      autosize
      type="textarea"
      placeholder="请输入昵称"
      show-word-limit
      :error-message="inputContent.length > 50 ? '留言不能超过50个字' : ''"
    />
  </van-cell-group>
  <!-- 底部按钮部分 -->
  <van-button loading-text="提交中..." class="submit" type="primary" round block
    >保存资料</van-button
  >
</template>

<style scoped>
.input {
  margin: 16px;
}
.submit {
  padding: 16px;
  margin: auto;
  border-color: coral;
  background-color: coral;
}
</style>
